<!--角色分配权限-->
<template>
  <div id="rolePermission" class="app-container">
    <div class="table-container flex-main">
      <div class="table-container-header">
        <table-toolbar :show-search="false" :create="false" :remove="false" @refresh="handleRoleClick">
          <template>
            <el-checkbox v-model="permissionCheckAll" style="margin: 0 15px;" @change="handlePermissionCheckAll">全选</el-checkbox>
            <el-button type="primary" icon="el-icon-plus" plain @click="handleBatchAuthorization">批量授权</el-button>
            <el-button type="danger" icon="el-icon-delete" plain @click="handleBatchCancel">批量取消</el-button>
          </template>
          <template slot="rightTool">
            <el-button circle :icon="expandAll?'el-icon-arrow-up':'el-icon-arrow-down'" style="  margin-left: 10px;" @click="expandAll?handleMerge():handleExpand()" />
          </template>
        </table-toolbar>
      </div>
      <el-tree
        v-if="isMergeTable"
        ref="permissionTree"
        class="common-el-tree"
        :data="permissionData"
        show-checkbox
        node-key="id"
        :expand-on-click-node="false"
        :default-expand-all="expandAll"
        :props="{children: 'permissionVos',label: 'name'}">
        <span slot-scope="{ node }" class="custom-tree-node">
          <span class="text" :class="!rolePermissionIds.includes(node.data.id)?'color-danger':''">
            {{ node.label }}&nbsp;
            <span class="color-primary">&nbsp;({{ node.data.permissionValue }})</span>
          </span>
          <span style="padding-right:10px">
            <el-button v-if="rolePermissionIds.includes(node.data.id)" type="text" size="mini" class="color-primary">已授权</el-button>
            <el-button v-else type="text" size="mini" class="color-danger">未授权</el-button>
          </span>
        </span>
      </el-tree>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    selectedRole: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      permissionCheckAll: false,
      expandAll: true,
      isMergeTable: true,
      rolePermissionIds: [],
      permissionData: [],
      rolePermissions: [],
      listQuery: {
        page: 1,
        limit: this.common.PAGE_LIMIT_DEFAULT,
        sort: this.common.SORT_DEFAULT
      },
      multipleSelectionRecords: []

    }
  },
  mouted() {},
  watch: {
    selectedRole: function(val) {
      this.handleRoleClick()
    }
  },
  created() {
    this.fetchPermission()
    this.handleRoleClick()
  },
  methods: {

    handleMerge() {
      this.isMergeTable = false
      this.expandAll = false
      this.$nextTick(() => {
        this.isMergeTable = true
      })
    },
    handleExpand() {
      this.isMergeTable = false
      this.expandAll = true
      this.$nextTick(() => {
        this.isMergeTable = true
      })
    },

    // 单击角色
    handleRoleClick() {
      if (this.selectedRole.pid !== '0') {
        this.listQuery.roleId = this.selectedRole.id
        this.listQuery.roleName = this.selectedRole.name
        this.fetchPermissionuTreeTable()
        this.$nextTick(() => {
          this.$refs.permissionTree.setCheckedNodes([])
        })
      } else {
        this.msgWarning('请选择子角色')
      }
    },
    fetchPermission() {
      this.$store.dispatch('permissionTreeTable', { 'sort': '+orders' }).then((res) => {
        this.permissionData = res
      }).catch((_) => {})
    },
    async fetchPermissionuTreeTable() {
      if (!this.selectedRole.id) {
        return
      }
      const response = await this.$store.dispatch('getPermissionByRoleId', this.listQuery.roleId)
      this.rolePermissionIds = []
      response.forEach(item => {
        this.rolePermissionIds.push(item.id)
      })
    },
    /**
     * 全选/反选
     */

    handlePermissionCheckAll() {
      // 判断按钮的状态
      if (this.permissionCheckAll) {
        // 设置
        this.$refs.permissionTree.setCheckedNodes(this.permissionData)
      } else {
        this.$refs.permissionTree.setCheckedNodes([])
      }
    },
    // 批量授权
    handleBatchAuthorization() {
      var checkNodes = this.$refs.permissionTree.getCheckedNodes(false, true)
      if (checkNodes.length > 0) {
        const permissionIdList = []
        checkNodes.forEach((item) => {
          permissionIdList.push(item.id)
        })
        this.$store.dispatch('rolePermissionSave', {
          roleId: this.listQuery.roleId,
          permissionIdList: permissionIdList
        }).then(response => {
          this.msgSuccess('权限分配成功')
          this.handleRoleClick()
        }).catch((_) => {})
      } else {
        this.msgWarning('请选择一条记录')
      }
    },

    // 批量取消
    handleBatchCancel() {
      var checkNodes = this.$refs.permissionTree.getCheckedNodes(false, false)
      if (checkNodes.length > 0) {
        const permissionIdList = []
        checkNodes.forEach((item) => {
          permissionIdList.push(item.id)
        })
        this.$store.dispatch('rolePermissionRemove', {
          roleId: this.listQuery.roleId,
          permissionIdList: permissionIdList
        }).then(response => {
          this.msgSuccess('权限取消成功')
          this.handleRoleClick()
        }).catch((_) => {})
      } else {
        this.msgWarning('请选择一条记录')
      }
    }

  }
}
</script>

<style lang="scss" >
</style>
